<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
</head>
<body>
    <div class="game-container">
        <!-- 游戏标题 -->
        <header class="game-header">
            <h1 class="animate__animated animate__fadeInDown">五子棋大师</h1>
            <div class="game-controls">
                <button id="newGame" class="btn btn-primary">新游戏</button>
                <button id="settingsBtn" class="btn btn-secondary">设置</button>
                <button id="helpBtn" class="btn btn-info">帮助</button>
            </div>
        </header>

        <!-- 游戏信息面板 -->
        <div class="game-info">
            <div class="player-info">
                <div class="player black-player">
                    <div class="player-avatar">⚫</div>
                    <div class="player-name">黑棋</div>
                    <div class="player-status active" id="blackStatus">当前回合</div>
                </div>
                <div class="game-stats">
                    <div class="timer" id="gameTimer">00:00</div>
                    <div class="move-count">步数: <span id="moveCount">0</span></div>
                </div>
                <div class="player white-player">
                    <div class="player-avatar">⚪</div>
                    <div class="player-name">白棋</div>
                    <div class="player-status" id="whiteStatus">等待中</div>
                </div>
            </div>
        </div>

        <!-- 游戏棋盘 -->
        <div class="game-board-container">
            <canvas id="gameBoard" width="600" height="600"></canvas>
            <div class="board-overlay" id="boardOverlay"></div>
        </div>

        <!-- 游戏模式选择 -->
        <div class="game-modes">
            <button class="mode-btn active" data-mode="pvp">玩家对战</button>
            <button class="mode-btn" data-mode="pve-easy">简单AI</button>
            <button class="mode-btn" data-mode="pve-hard">困难AI</button>
            <button class="mode-btn" data-mode="online">在线对战</button>
        </div>
    </div>

    <!-- 设置面板 -->
    <div class="modal" id="settingsModal">
        <div class="modal-content animate__animated animate__zoomIn">
            <div class="modal-header">
                <h3>游戏设置</h3>
                <button class="close-btn" id="closeSettings">&times;</button>
            </div>
            <div class="modal-body">
                <div class="setting-group">
                    <label>背景主题:</label>
                    <div class="theme-selector">
                        <button class="theme-btn active" data-theme="wood">木纹</button>
                        <button class="theme-btn" data-theme="marble">大理石</button>
                        <button class="theme-btn" data-theme="space">星空</button>
                        <button class="theme-btn" data-theme="nature">自然</button>
                    </div>
                </div>
                <div class="setting-group">
                    <label>音效设置:</label>
                    <div class="sound-controls">
                        <input type="range" id="soundVolume" min="0" max="100" value="50">
                        <button id="muteBtn" class="btn btn-small">🔊</button>
                    </div>
                </div>
                <div class="setting-group">
                    <label>棋盘大小:</label>
                    <select id="boardSize">
                        <option value="15">15x15 (标准)</option>
                        <option value="19">19x19 (围棋)</option>
                        <option value="13">13x13 (小型)</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- 帮助面板 -->
    <div class="modal" id="helpModal">
        <div class="modal-content animate__animated animate__slideInUp">
            <div class="modal-header">
                <h3>游戏规则</h3>
                <button class="close-btn" id="closeHelp">&times;</button>
            </div>
            <div class="modal-body">
                <div class="help-content">
                    <h4>基本规则:</h4>
                    <ul>
                        <li>黑棋先行，双方轮流下棋</li>
                        <li>率先在横、竖、斜任一方向连成五子者获胜</li>
                        <li>棋子下在棋盘交叉点上</li>
                        <li>已下的棋子不能移动</li>
                    </ul>
                    <h4>游戏模式:</h4>
                    <ul>
                        <li><strong>玩家对战:</strong> 两人轮流对弈</li>
                        <li><strong>简单AI:</strong> 与电脑对战(初级)</li>
                        <li><strong>困难AI:</strong> 与电脑对战(高级)</li>
                        <li><strong>在线对战:</strong> 与网络玩家对战</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 游戏结束面板 -->
    <div class="modal" id="gameOverModal">
        <div class="modal-content animate__animated animate__bounceIn">
            <div class="modal-header">
                <h3 id="gameOverTitle">游戏结束</h3>
            </div>
            <div class="modal-body">
                <div class="game-result">
                    <div class="winner-display" id="winnerDisplay"></div>
                    <div class="game-summary" id="gameSummary"></div>
                    <div class="action-buttons">
                        <button id="playAgain" class="btn btn-primary">再来一局</button>
                        <button id="backToMenu" class="btn btn-secondary">返回菜单</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载动画 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在加载游戏...</div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="game.js"></script>
</body>
</html>